<template>
    <div style="position: fixed;width: 100%;height: 100%;overflow-y: scroll;">
        <div style="position: absolute;top: .6rem;right: .6rem;font-size: .9rem;color: #555;" @click="goBack">预约记录 ></div>
        <div style="text-align: center;padding: .6rem 0;">预约</div>
        <hr>
        <div class="house">
            <div class="m-input">
                <span class="label">选择项目：</span>
                <div class="projectList">
                    <div class="project-item" v-for="(v,index) in tableData" @click="chooseProject(v)" :class="{active: currentProject.id==v.id}">
                        {{v.name}}
                    </div>
                </div>
            </div>
            <div class="m-input" style="flex-direction: column;">
                <span class="label">选择时间段：</span>
                <div class="projectList" style="width: 100%">
                    <div class="project-item" style="width: 90%"
                         v-for="(v,index) in appList" @click="chooseTime(v)" :class="{active: currentTime.id==v.id}">
                        {{v.start_time}} 至 {{v.end_time}}
                    </div>
                </div>
            </div>

            <div style="margin: 3rem 0 1rem 0;text-align: center;">
                <el-button type="primary" style="width: 80%;padding: 1rem 0;" @click="sub">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import pub from '../../utils/pub'
    export default {
        name: "address-add",
        data(){
            return{
                tableData: [],
                appList: [],
                currentProject: {},
                currentTime: {},
                userAddressList: [],
                userAddress: {}
            }
        },
        watch: {
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.2)'});
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {this.loading.close();},
            goBack(){
                this.$router.push('/mobile/appointment-record')
            },
            // 获取住户信息
            getMyAddress(){
                this.loadopen();
                this.config.mpost('/api/project/appointmentrecord/findUserAddress', {}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.userAddressList = res.data.userAddressList;
                        if(this.userAddressList.length<=1){
                            this.userAddress = this.userAddressList[0]
                        }else{
                            this.userAddressList.forEach(it=>{
                                if(it.is_default==='1'){
                                    this.userAddress = it;
                                }
                            })
                        }
                    }else{
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            // 获取可预约的项目
            getProject(pageNumber) {
                this.loadopen();
                this.config.mpost('/api/project/appointmentrecord/findProjectPage', {
                    pageNum: pageNumber?pageNumber:1,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.currentPage1 = res.data.page.pageNumber;
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            // 根据项目获取预约时间段
            getProjectTimes(projectId) {
                let self = this;
                this.loadopen();
                this.config.mpost('/api/project/appointmentrecord/findAppointmentList', {
                    projectId: this.currentProject.id,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        self.appList = res.data.projectAppointmentList;
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            upFile(){
                let self = this;
                let el = document.createElement('input')
                el.type = 'file';el.accept="image/*"
                el.onchange = (e)=>{
                    self.loadopen()
                    pub.OssUpload(e.target.files[0], (res)=>{
                        self.loadclose()
                        self.imgList = [res];
                    })
                };
                el.click();
            },
            chooseProject(v){
                this.currentProject = v;
                this.getProjectTimes()
            },
            chooseTime(v){
                this.currentTime = v;
            },
            valid(){
                if(!this.currentTime.id) return false;
                return true;
            },
            sub(){
                if(!this.valid()) return;
                let obj = {
                    'par.project_id': this.currentProject.id,
                    'par.appointment_id': this.currentTime.id,
                    'par.user_address_id': this.userAddress.id,
                    'par.housinggestate_id': this.userAddress.housinggestate_id,
                    'par.building_id': this.userAddress.building_id,
                    'par.unit_id': this.userAddress.unit_id,
                    'par.floor_id': this.userAddress.floor_id,
                    'par.house_id': this.userAddress.house_id,
                    'par.start_time': this.currentTime.start_time,
                    'par.end_time': this.currentTime.end_time,
                }
                this.loadopen();
                this.config.mpost('/api/project/appointmentrecord/add', obj).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        this.$message({message: res.data.message,type: 'success'});
                        this.$router.push('/mobile/appointment-record')
                    } else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            }
        },
        mounted(){
            this.getProject()
            this.getMyAddress()
        }
    }
</script>

<style scoped lang="less">
    .house .m-input{
        padding: .5rem;
    }
    .m-input{
        display: flex;
        .projectList{
            width: 70%;
            display: inline-block;
            .project-item{
                padding: .5rem 1rem;
                box-shadow: 0 0 .5rem 0 #ccc;
                border-radius: 5px;
                font-size: .8rem;
                margin: .5rem 0;
            }
            .project-item.active{
                border: 1px solid red;
            }
        }
    }
</style>
